import React from 'react';
import { TjStation } from '@/pages/ETrade/components';
import { monthFormat } from '../../constant';
import { Button, DatePicker, Space } from 'antd';
import { SettingOutlined } from '#/utils/antdIcons';
import TimeSettingModal from '../TimeSettingModal';
import moment from 'moment/moment';

const { RangePicker } = DatePicker;

const width = 160;
export const Header = ({
  calculateLoading,
  buttonPermissions = [],
  searchParam = {},
  power = [],
  setSearchParams,
  stations = [],
  province = [],
  handleCalculate,
}) => {
  const openSettingModal = () => {
    TimeSettingModal.show({
      province,
    });
  };

  const changeStationIds = (v) => {
    setSearchParams({
      stationIds: v,
    });
  };

  const changeDate = (v) => {
    setSearchParams({
      date: v,
    });
  };

  const reset = () => {
    const stationIds = power?.[0]?.['children']?.[0]?.['value']
      ? [power?.[0]?.['children']?.[0]?.['value']]
      : [];
    setSearchParams({
      stationIds,
      date: [moment(), moment()],
    });
  };

  return (
    <>
      <Space size={16}>
        <TjStation
          width={width}
          options={stations}
          onChange={changeStationIds}
          value={searchParam.stationIds}
        />
        <RangePicker
          allowClear={false}
          onChange={changeDate}
          style={{ width: 200 }}
          value={searchParam.date}
          format={monthFormat}
          picker="month"
        />
        <Button
          type={'primary'}
          onClick={handleCalculate}
          loading={calculateLoading}
          disabled={!buttonPermissions.find((item) => item.menuCode === 'dayaheadPriceCalculate')}
        >
          计算
        </Button>
        <Button onClick={reset}>重置</Button>
      </Space>
      <Button
        type="link"
        onClick={openSettingModal}
        icon={<SettingOutlined />}
        disabled={!buttonPermissions.find((item) => item.menuCode === 'timeOrderSetting')}
      >
        时间段设置
      </Button>
    </>
  );
};
